<template>
    <div class="box">

        <div class="submit-container">
            <van-nav-bar class="shop-bag-nav" title="提交订单" fixed left-text="返回" left-arrow @click-left="back" />
            <!-- 地址栏 -->
            <div class="address-box">
                <van-cell is-link title="选择收货地址" @click="showAddree" class="address-box-btn" />
                <div class="address-box-info">
                    <div><span class="box-info-name">{{chosenAddress.name}}</span>{{chosenAddress.tel}}</div>
                    <div>{{chosenAddress.address}}</div>
                </div>
            </div>
            <!--  -->
            <div class="order-container">
                <div class="order-title">订单信息</div>
                <div class="order-content">
                    <div class="order-item" v-for="(item,index) in orderList" :key="index">
                        <img :src="item.small_img" alt="item.name">
                        <div class="order-info">
                            <div><span class="name">{{item.name}}</span>{{item.rule}}</div>
                            <div>{{item.enname}}</div>
                            <div><span class="price">￥{{item.price}}</span><span class="count">x{{item.count}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="total-price">
                        <div>共计2件商品</div>
                        <div class="pricetotal">合计 ￥{{orderTotle}}</div>
                        <div class="circular left"></div>
                        <div class="circular right"></div>
                    </div>
                </div>
            </div>


            <!-- 收货弹窗 -->
            <van-action-sheet v-model="isshowAddree" title="选择收货地址" class="van-action">
                <div class="address-list">
                    <van-address-list v-model="chosenAddress.id" :list="list" default-tag-text="默认" @add="onAdd"
                        @edit="onEdit" @select="selectAdd" />
                </div>
            </van-action-sheet>
        </div>

        <van-submit-bar button-text="提交订单" @submit="paySubmit" class="settlement" />
    </div>

</template>
<script>
    import '../assets/scss/AddressList.scss';
    import '../assets/scss/Submit.scss';
    export default {
        name: 'Submit',
        data() {
            return {
                // 测试图片
                img: 'https://img.yzcdn.cn/vant/custom-empty-image.png',
                isshowAddree: false,
                // 选择当前的地址
                chosenAddress: {},
                // 显示地址数据
                list: [
                    // {
                    //     id: '2',
                    //     name: '李四',
                    //     tel: '1310000000',
                    //     address: '浙江省杭州市拱墅区莫干山路 50 号',
                    // },
                ],
                sids: [],
                orderList: [],
                orderTotle: 0,
            };
        },
        created() {
            this.init();
        },
        methods: {
            //返回上一级
            showAddree() {
                this.isshowAddree = true;
                this.getAddressList();

            },
            back() {
                this.$router.go(-1);
            },


            // 订单信息功能
            // 获取订单
            getOrderData() {


                this.axios({
                    method: 'GET',
                    url: '/commitShopcart',
                    params: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),
                        sids: this.sids
                    }
                }).then(result => {
                    if (result.data.code === 50000) {
                        console.log('oreder=>', result);
                        this.orderList = result.data.result;

                        result.data.result.map(i => {
                            this.orderTotle += i.price * i.count;
                        })
                    }
                }).catch(err => {
                    console.log('order err=>', err);
                })
            },

            // 地址栏功能
            // 选中按钮
            selectAdd(item, index) {
                console.log('now add=>', index, '==>', item);
                this.chosenAddress = item;
                this.isshowAddree = false;

            },
            // 添加按钮
            onAdd() {
                this.$router.push({
                    name: 'AddressEdit'
                })
            },
            // 跳转到编辑页面
            onEdit(item, index) {
                console.log(item);
                this.$router.push({
                    name: 'AddressEdit',
                    params: {
                        aid: item.aid
                    }
                })
            },
            // 获取列表信息
            getAddressList() {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                this.axios({
                        method: 'GET',
                        url: '/findAddress',
                        params: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk')
                        }
                    })
                    .then(result => {
                        // console.log('请求地址list=>', result);


                        if (result.data.code === 20000) {
                            this.$toast.clear();
                            this.adrList = result.data.result;
                            let addree = [];
                            result.data.result.map(item => {
                                addree.push({
                                    ...item,
                                    address: `${item.city} ${item.county} ${item.addressDetail}`
                                })
                            })
                            this.list = addree;
                        }
                    })
                    .catch(err => {
                        console.log('err=>', err);
                    })
            },
            // 订单提交、
            paySubmit() {
                this.axios({
                    method: 'POST',
                    url: '/pay',
                    data: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),
                        sids: this.sids,

                        phone: this.chosenAddress.tel,
                        address: this.chosenAddress.address,
                        receiver: this.chosenAddress.name
                    }
                }).then(result => {
                    console.log(result);
                    this.$toast(result.data.msg)
                }).then(err => {
                    console.log(err);
                })
                
            },
            // 初始化
            init() {
                console.log('route params=>', this.$route.params)
                this.sids = this.$route.params['sids'];
                this.sids = JSON.stringify(this.sids);


                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                this.axios({
                        method: 'GET',
                        url: '/findAddress',
                        params: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk')
                        }
                    })
                    .then(result => {
                        console.log('请求地址list=>', result);


                        if (result.data.code === 20000) {
                            this.$toast.clear();
                            this.adrList = result.data.result;
                            let addree = [];
                            result.data.result.map(item => {
                                addree.push({
                                    ...item,
                                    address: `${item.city} ${item.county} ${item.addressDetail}`
                                })
                                // 确认默认id
                                if (item.isDefault) {
                                    this.chosenAddress = {
                                        ...item,
                                        address: `${item.city} ${item.county} ${item.addressDetail}`
                                    };
                                }


                            })
                            this.list = addree;
                        }
                    })
                    .catch(err => {
                        console.log('err=>', err);
                    })
                this.getOrderData();
            },
        },
    };
</script>
<style>

</style>